<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享米宝管理后台 - 投资人管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../assets/css/custom.css">
</head>
<body class="bg-gray-100">
    <div class="admin-container flex">
        <!-- Sidebar -->
        <div class="w-64 bg-gray-800 min-h-screen flex-shrink-0">
            <div class="p-4 text-white">
                <div class="flex items-center mb-6">
                    <i class="fas fa-bolt mr-2 text-yellow-400"></i>
                    <span class="text-lg font-medium">共享米宝管理系统</span>
                </div>
                
                <nav>
                    <a href="index.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-chart-line mr-2"></i> 控制台
                    </a>
                    <a href="users.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-users mr-2"></i> 用户管理
                    </a>
                    <a href="investors.html" class="block py-2 px-4 rounded bg-gray-700 mb-1">
                        <i class="fas fa-user-tie mr-2"></i> 投资人管理
                    </a>
                    <a href="devices.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-battery-full mr-2"></i> 设备管理
                    </a>
                    <a href="revenue.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-money-bill-wave mr-2"></i> 收益管理
                    </a>
                    <a href="commission-settings.html" class="block py-2 px-4 rounded hover:bg-gray-700 mb-1">
                        <i class="fas fa-cog mr-2"></i> 分润设置
                    </a>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow">
            <!-- Header -->
            <header class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <h1 class="text-xl font-medium">投资人管理</h1>
                    <div class="flex items-center">
                        <span class="mr-4">管理员</span>
                        <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/40" alt="管理员头像">
                    </div>
                </div>
            </header>

            <!-- Page content -->
            <main class="container mx-auto p-4">
                <!-- Search and Filter -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex flex-wrap gap-4">
                        <!-- Search by Investor -->
                        <div class="flex-grow min-w-[250px]">
                            <label class="block text-sm text-gray-600 mb-1">投资人搜索</label>
                            <div class="flex">
                                <input type="text" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="手机号/ID/姓名">
                                <button class="bg-blue-500 text-white px-4 py-2 rounded-r-md">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Filter by Devices Count -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">设备数量</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部</option>
                                <option value="1-5">1-5台</option>
                                <option value="6-10">6-10台</option>
                                <option value="11-20">11-20台</option>
                                <option value=">20">20台以上</option>
                            </select>
                        </div>

                        <!-- Filter by Date -->
                        <div class="w-48">
                            <label class="block text-sm text-gray-600 mb-1">注册时间</label>
                            <select class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部时间</option>
                                <option value="last7days">最近7天</option>
                                <option value="last30days">最近30天</option>
                                <option value="last3months">最近3个月</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Investor List -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-lg font-medium">投资人列表</h2>
                        <div class="flex gap-2">
                            <button id="export-investors-btn" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                                <i class="fas fa-file-export mr-2"></i>
                                导出列表
                            </button>
                            <button id="add-investor-btn" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm flex items-center">
                                <i class="fas fa-plus mr-2"></i>
                                添加投资人
                            </button>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资人信息</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资设备数</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">招商人</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">投资日期</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">累计收益</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分润比例</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">张志强</div>
                                                <div class="text-xs text-gray-500">13866668888</div>
                                                <div class="text-xs text-gray-500">ID: INV20230415</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="font-medium">5台</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="text-sm">王小明</div>
                                        <div class="text-xs text-gray-500">UID: REC20230101</div>
                                        <div class="text-xs text-gray-500">手机: 13999998888</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥1,280.50</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">20%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="device-binding.html" class="text-blue-500 mr-3">设备绑定</a>
                                        <a href="#" class="text-blue-500 mr-3 investor-earnings-btn" data-investor="INV20230415">收益明细</a>
                                        <a href="#" class="text-blue-500 investor-edit-btn" data-investor="INV20230415">编辑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">李小红</div>
                                                <div class="text-xs text-gray-500">13999998888</div>
                                                <div class="text-xs text-gray-500">ID: INV20230402</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="font-medium">8台</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="text-sm">赵强</div>
                                        <div class="text-xs text-gray-500">UID: REC20230101</div>
                                        <div class="text-xs text-gray-500">手机: 13999998888</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-04-02</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥1,950.20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">20%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="device-binding.html" class="text-blue-500 mr-3">设备绑定</a>
                                        <a href="#" class="text-blue-500 mr-3 investor-earnings-btn" data-investor="INV20230402">收益明细</a>
                                        <a href="#" class="text-blue-500 investor-edit-btn" data-investor="INV20230402">编辑</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <img class="h-10 w-10 rounded-full mr-3" src="https://via.placeholder.com/40" alt="投资人头像">
                                            <div>
                                                <div class="text-sm font-medium">王大明</div>
                                                <div class="text-xs text-gray-500">13777776666</div>
                                                <div class="text-xs text-gray-500">ID: INV20230320</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <span class="font-medium">12台</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <div class="text-sm">张招商</div>
                                        <div class="text-xs text-gray-500">UID: REC20230101</div>
                                        <div class="text-xs text-gray-500">手机: 13888889999</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">2023-03-20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥2,580.90</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">25%</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                                        <a href="device-binding.html" class="text-blue-500 mr-3">设备绑定</a>
                                        <a href="#" class="text-blue-500 mr-3 investor-earnings-btn" data-investor="INV20230320">收益明细</a>
                                        <a href="#" class="text-blue-500 investor-edit-btn" data-investor="INV20230320">编辑</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="flex justify-between items-center mt-6">
                        <div class="text-sm text-gray-500">
                            显示 1-10 条，共 52 条
                        </div>
                        <div class="flex space-x-1">
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                                1
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                2
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                3
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                4
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm">
                                5
                            </button>
                            <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Add/Edit Investor Modal -->
                <div id="investor-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-md w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">添加/编辑投资人</h3>
                            <button id="close-modal-btn" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div id="user-select-section">
                                <label class="block text-sm text-gray-600 mb-1">选择用户</label>
                                <div class="flex">
                                    <input type="text" id="user-search" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入UID/手机号">
                                    <button id="search-user-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div id="user-info" class="mt-2 p-2 border border-gray-300 rounded-md hidden">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-2" src="https://via.placeholder.com/32" alt="用户头像">
                                        <div>
                                            <div class="text-sm font-medium" id="selected-user-name">未选择用户</div>
                                            <div class="text-xs text-gray-500" id="selected-user-id">UID: -</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="device-input-section">
                                <label class="block text-sm text-gray-600 mb-1">设备号录入</label>
                                <div class="mb-2">
                                    <textarea id="device-numbers" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3" placeholder="输入设备号，多个设备号请用逗号、空格或换行分隔"></textarea>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xs text-gray-500">已输入: <span id="device-count">0</span> 台设备</div>
                                    <button id="scan-device-btn" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200">
                                        <i class="fas fa-qrcode mr-1"></i> 扫码添加
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">招商人</label>
                                <div class="flex">
                                    <input type="text" id="recruiter-search" class="w-full border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入UID/手机号">
                                    <button id="search-recruiter-btn" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-r-md">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <div id="recruiter-info" class="mt-2 p-2 border border-gray-300 rounded-md hidden">
                                    <div class="flex items-center">
                                        <img class="h-8 w-8 rounded-full mr-2" src="https://via.placeholder.com/32" alt="招商人头像">
                                        <div>
                                            <div class="text-sm font-medium" id="selected-recruiter-name">未选择招商人</div>
                                            <div class="text-xs text-gray-500" id="selected-recruiter-id">UID: -</div>
                                            <div class="text-xs text-gray-500" id="selected-recruiter-phone">手机: -</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-sm text-gray-600 mb-1">分润比例</label>
                                <div class="flex items-center">
                                    <input type="number" min="0" max="100" value="20" class="w-24 border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <span class="ml-2">%</span>
                                </div>
                                <!-- <div class="flex items-center mt-2">
                                    <input type="checkbox" id="use-default" class="mr-2" checked>
                                    <label for="use-default" class="text-sm">使用默认值</label>
                                </div> -->
                            </div>
                            
                            <div class="flex justify-end space-x-2 pt-4">
                                <button id="cancel-investor-btn" class="px-4 py-2 border border-gray-300 rounded-md text-sm">
                                    取消
                                </button>
                                <button id="save-investor-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Earnings Detail Modal -->
                <div id="earnings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
                    <div class="bg-white rounded-lg p-6 max-w-4xl w-full">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium">收益明细 - <span id="investor-name-title">投资人</span></h3>
                            <button id="close-earnings-modal" class="text-gray-500">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <!-- 过滤器 -->
                        <div class="mb-4 bg-gray-50 p-4 rounded-lg">
                            <div class="flex flex-wrap gap-4 items-end">
                                <div>
                                    <label class="block text-sm text-gray-600 mb-1">设备SN</label>
                                    <input type="text" id="filter-sn" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="输入设备SN">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-600 mb-1">开始日期</label>
                                    <input type="date" id="filter-start-date" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label class="block text-sm text-gray-600 mb-1">结束日期</label>
                                    <input type="date" id="filter-end-date" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                                <button id="filter-search-btn" class="bg-blue-500 text-white px-4 py-2 rounded-md text-sm h-10">
                                    <i class="fas fa-search mr-1"></i> 查询
                                </button>
                                <button id="filter-reset-btn" class="border border-gray-300 px-4 py-2 rounded-md text-sm h-10">
                                    <i class="fas fa-redo-alt mr-1"></i> 重置
                                </button>
                            </div>
                        </div>
                        
                        <!-- 明细表格 -->
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备SN</th>
                                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收益时间</th>
                                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">收益金额</th>
                                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分润比例</th>
                                        <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                                    </tr>
                                </thead>
                                <tbody id="earnings-table-body" class="bg-white divide-y divide-gray-200">
                                    <!-- 收益明细数据将通过JavaScript动态填充 -->
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页 -->
                        <div class="flex justify-between items-center mt-6">
                            <div class="text-sm text-gray-500">
                                显示 <span id="earnings-start">1</span>-<span id="earnings-end">10</span> 条，共 <span id="earnings-total">0</span> 条
                            </div>
                            <div class="flex space-x-1" id="earnings-pagination">
                                <!-- 分页将通过JavaScript动态填充 -->
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript for functionality -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Modal handling
            const addInvestorBtn = document.getElementById('add-investor-btn');
            const investorModal = document.getElementById('investor-modal');
            const closeModalBtn = document.getElementById('close-modal-btn');
            const cancelInvestorBtn = document.getElementById('cancel-investor-btn');
            
            // Earnings modal elements
            const earningsModal = document.getElementById('earnings-modal');
            const closeEarningsModal = document.getElementById('close-earnings-modal');
            const investorNameTitle = document.getElementById('investor-name-title');
            const earningsTableBody = document.getElementById('earnings-table-body');
            const earningsStart = document.getElementById('earnings-start');
            const earningsEnd = document.getElementById('earnings-end');
            const earningsTotal = document.getElementById('earnings-total');
            const earningsPagination = document.getElementById('earnings-pagination');
            
            // Filter elements
            const filterSn = document.getElementById('filter-sn');
            const filterStartDate = document.getElementById('filter-start-date');
            const filterEndDate = document.getElementById('filter-end-date');
            const filterSearchBtn = document.getElementById('filter-search-btn');
            const filterResetBtn = document.getElementById('filter-reset-btn');
            
            // User and recruiter search elements
            const userSelectSection = document.getElementById('user-select-section');
            const deviceInputSection = document.getElementById('device-input-section');
            const userSearchInput = document.getElementById('user-search');
            const userSearchBtn = document.getElementById('search-user-btn');
            const userInfo = document.getElementById('user-info');
            const selectedUserName = document.getElementById('selected-user-name');
            const selectedUserId = document.getElementById('selected-user-id');
            
            const recruiterSearchInput = document.getElementById('recruiter-search');
            const recruiterSearchBtn = document.getElementById('search-recruiter-btn');
            const recruiterInfo = document.getElementById('recruiter-info');
            const selectedRecruiterName = document.getElementById('selected-recruiter-name');
            const selectedRecruiterId = document.getElementById('selected-recruiter-id');
            const selectedRecruiterPhone = document.getElementById('selected-recruiter-phone');
            
            const deviceNumbersTextarea = document.getElementById('device-numbers');
            const deviceCountElement = document.getElementById('device-count');
            const scanDeviceBtn = document.getElementById('scan-device-btn');
            
            const saveInvestorBtn = document.getElementById('save-investor-btn');
            
            // 设备号输入处理
            deviceNumbersTextarea.addEventListener('input', updateDeviceCount);
            
            function updateDeviceCount() {
                const text = deviceNumbersTextarea.value.trim();
                if (!text) {
                    deviceCountElement.textContent = '0';
                    return;
                }
                
                // 分割设备号 - 支持逗号、空格、换行符分隔
                const deviceNumbers = text.split(/[\s,，]+/).filter(d => d.trim() !== '');
                deviceCountElement.textContent = deviceNumbers.length.toString();
            }
            
            // 扫码添加设备
            scanDeviceBtn.addEventListener('click', function() {
                // 模拟扫码过程
                alert('请扫描设备二维码...');
                // 实际项目中应该调用相机API或其他扫码方式
                setTimeout(() => {
                    const randomDeviceId = 'DEV' + Math.floor(Math.random() * 1000000).toString().padStart(6, '0');
                    const currentValue = deviceNumbersTextarea.value.trim();
                    deviceNumbersTextarea.value = currentValue ? currentValue + '\n' + randomDeviceId : randomDeviceId;
                    updateDeviceCount();
                }, 1000);
            });
            
            // Show investor modal for adding new investor
            addInvestorBtn.addEventListener('click', function() {
                // 重置表单，设置为添加模式
                resetInvestorForm(false);
                userSelectSection.classList.remove('hidden');
                deviceInputSection.classList.remove('hidden');
                investorModal.classList.remove('hidden');
            });
            
            // Hide modal
            function hideInvestorModal() {
                investorModal.classList.add('hidden');
                resetInvestorForm(false);
            }
            
            closeModalBtn.addEventListener('click', hideInvestorModal);
            cancelInvestorBtn.addEventListener('click', hideInvestorModal);
            
            // 重置表单
            function resetInvestorForm(isEditMode) {
                userSearchInput.value = '';
                userInfo.classList.add('hidden');
                selectedUserName.textContent = '未选择用户';
                selectedUserId.textContent = 'UID: -';
                
                recruiterSearchInput.value = '';
                recruiterInfo.classList.add('hidden');
                selectedRecruiterName.textContent = '未选择招商人';
                selectedRecruiterId.textContent = 'UID: -';
                selectedRecruiterPhone.textContent = '手机: -';
                
                deviceNumbersTextarea.value = '';
                updateDeviceCount();
                
                // 如果是编辑模式，隐藏用户选择和设备输入部分
                if (isEditMode) {
                    userSelectSection.classList.add('hidden');
                    deviceInputSection.classList.add('hidden');
                }
            }
            
            // 用户搜索功能
            userSearchBtn.addEventListener('click', function() {
                const searchValue = userSearchInput.value.trim();
                if (!searchValue) {
                    alert('请输入UID或手机号');
                    return;
                }
                
                // 模拟API调用
                console.log(`搜索用户: ${searchValue}`);
                // 实际项目中应该调用后端API查询用户
                setTimeout(() => {
                    // 模拟找到用户
                    userInfo.classList.remove('hidden');
                    selectedUserName.textContent = `测试用户_${searchValue}`;
                    selectedUserId.textContent = `UID: ${searchValue}`;
                }, 300);
            });
            
            // 招商人搜索功能
            recruiterSearchBtn.addEventListener('click', function() {
                const searchValue = recruiterSearchInput.value.trim();
                if (!searchValue) {
                    alert('请输入UID或手机号');
                    return;
                }
                
                // 模拟API调用
                console.log(`搜索招商人: ${searchValue}`);
                // 实际项目中应该调用后端API查询用户
                setTimeout(() => {
                    // 模拟找到用户
                    recruiterInfo.classList.remove('hidden');
                    selectedRecruiterName.textContent = `招商人_${searchValue}`;
                    selectedRecruiterId.textContent = `UID: ${searchValue}`;
                    selectedRecruiterPhone.textContent = `手机: 139${Math.floor(Math.random() * 10000000).toString().padStart(8, '0')}`;
                }, 300);
            });
            
            // 保存投资人
            saveInvestorBtn.addEventListener('click', function() {
                // 判断是否是编辑模式
                const isEditMode = userSelectSection.classList.contains('hidden');
                
                if (!isEditMode) {
                    // 添加模式需要验证用户和设备号
                    if (userInfo.classList.contains('hidden')) {
                        alert('请先选择用户');
                        return;
                    }
                    
                    // 判断是否输入了设备号
                    const deviceNumbers = deviceNumbersTextarea.value.trim();
                    if (!deviceNumbers) {
                        alert('请输入至少一个设备号');
                        return;
                    }
                }
                
                // 获取表单数据
                const userData = {
                    isEditMode: isEditMode,
                    userId: selectedUserId.textContent.replace('UID: ', ''),
                    userName: selectedUserName.textContent,
                    recruiter: recruiterInfo.classList.contains('hidden') ? null : {
                        userId: selectedRecruiterId.textContent.replace('UID: ', ''),
                        userName: selectedRecruiterName.textContent,
                        phone: selectedRecruiterPhone.textContent.replace('手机: ', '')
                    },
                    deviceNumbers: !isEditMode ? deviceNumbersTextarea.value.split(/[\s,，]+/).filter(d => d.trim() !== '') : [],
                    profitRatio: document.querySelector('input[type="number"][max="100"]').value
                };
                
                console.log('保存投资人数据:', userData);
                // 实际项目中应该调用后端API保存数据
                alert('投资人信息保存成功！');
                hideInvestorModal();
            });
            
            // Export investors list
            const exportInvestorsBtn = document.getElementById('export-investors-btn');
            exportInvestorsBtn.addEventListener('click', function() {
                alert('开始导出投资人列表...');
                // 在实际项目中这里应该调用后端API进行导出操作
            });
            
            // 投资人收益明细按钮点击事件
            const investorEarningsBtns = document.querySelectorAll('.investor-earnings-btn');
            investorEarningsBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const investorId = this.getAttribute('data-investor');
                    const investorName = this.closest('tr').querySelector('.text-sm.font-medium').textContent;
                    
                    investorNameTitle.textContent = investorName;
                    showEarningsModal(investorId);
                });
            });
            
            // 显示收益明细模态框
            function showEarningsModal(investorId) {
                // 重置过滤器
                resetEarningsFilter();
                
                // 加载收益明细数据
                loadEarningsData(investorId);
                
                // 显示模态框
                earningsModal.classList.remove('hidden');
            }
            
            // 隐藏收益明细模态框
            function hideEarningsModal() {
                earningsModal.classList.add('hidden');
            }
            
            closeEarningsModal.addEventListener('click', hideEarningsModal);
            
            // 重置收益明细过滤器
            function resetEarningsFilter() {
                filterSn.value = '';
                filterStartDate.value = '';
                filterEndDate.value = '';
            }
            
            // 重置过滤器按钮
            filterResetBtn.addEventListener('click', resetEarningsFilter);
            
            // 查询按钮
            filterSearchBtn.addEventListener('click', function() {
                const currentInvestorId = document.querySelector('.investor-earnings-btn').getAttribute('data-investor');
                loadEarningsData(currentInvestorId);
            });
            
            // 加载收益明细数据
            function loadEarningsData(investorId) {
                // 获取过滤条件
                const filterData = {
                    sn: filterSn.value.trim(),
                    startDate: filterStartDate.value,
                    endDate: filterEndDate.value
                };
                
                console.log('加载收益明细:', investorId, filterData);
                
                // 模拟API调用
                setTimeout(() => {
                    // 模拟数据
                    const mockData = [
                        { sn: 'SN12345678', time: '2023-06-15 14:30:25', amount: 15.8, ratio: '25%', remark: '使用收益' },
                        { sn: 'SN12345678', time: '2023-06-14 09:15:10', amount: 12.5, ratio: '25%', remark: '使用收益' },
                        { sn: 'SN23456789', time: '2023-06-13 18:20:35', amount: 18.2, ratio: '25%', remark: '使用收益' },
                        { sn: 'SN23456789', time: '2023-06-12 11:45:50', amount: 10.0, ratio: '25%', remark: '使用收益' },
                        { sn: 'SN34567890', time: '2023-06-11 16:10:05', amount: 14.3, ratio: '25%', remark: '使用收益' }
                    ];
                    
                    // 根据过滤条件筛选数据
                    let filteredData = [...mockData];
                    if (filterData.sn) {
                        filteredData = filteredData.filter(item => item.sn.includes(filterData.sn));
                    }
                    
                    // 显示数据
                    displayEarningsData(filteredData);
                }, 300);
            }
            
            // 显示收益明细数据
            function displayEarningsData(data) {
                // 清空表格
                earningsTableBody.innerHTML = '';
                
                if (data.length === 0) {
                    // 无数据时显示提示
                    const noDataRow = document.createElement('tr');
                    noDataRow.innerHTML = `<td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无收益数据</td>`;
                    earningsTableBody.appendChild(noDataRow);
                    
                    earningsStart.textContent = '0';
                    earningsEnd.textContent = '0';
                    earningsTotal.textContent = '0';
                    earningsPagination.innerHTML = '';
                    return;
                }
                
                // 填充数据
                data.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${item.sn}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${item.time}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">¥${item.amount.toFixed(2)}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${item.ratio}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">${item.remark}</td>
                    `;
                    earningsTableBody.appendChild(row);
                });
                
                // 更新分页信息
                earningsStart.textContent = '1';
                earningsEnd.textContent = data.length.toString();
                earningsTotal.textContent = data.length.toString();
                
                // 简单分页
                earningsPagination.innerHTML = `
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50 cursor-not-allowed opacity-50">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-blue-500 text-white">
                        1
                    </button>
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-sm bg-gray-50 cursor-not-allowed opacity-50">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                `;
            }
            
            // 投资人编辑按钮点击事件
            const investorEditBtns = document.querySelectorAll('.investor-edit-btn');
            investorEditBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const investorId = this.getAttribute('data-investor');
                    console.log(`编辑投资人: ${investorId}`);
                    
                    // 显示编辑模态框
                    resetInvestorForm(true); // 设置为编辑模式
                    
                    // 模拟加载投资人数据
                    setTimeout(() => {
                        // 设置用户信息 - 在编辑模式下这些是只读的
                        userInfo.classList.remove('hidden');
                        selectedUserName.textContent = `王大明`;
                        selectedUserId.textContent = `UID: ${investorId}`;
                        
                        // 设置招商人信息
                        recruiterInfo.classList.remove('hidden');
                        selectedRecruiterName.textContent = `张招商`;
                        selectedRecruiterId.textContent = `UID: REC20230101`;
                        selectedRecruiterPhone.textContent = `手机: 13888889999`;
                    }, 300);
                    
                    investorModal.classList.remove('hidden');
                });
            });
        });
    </script>
</body>
</html> 